<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/common/header::header-head}">
</head>
<style>
    body{
        /*background:rgb(46, 150, 139) !important;*/
    }

   .title{
       color:deepskyblue !important;
   }
   .item-contation{
       width:850px;
       height:880px;
       margin:20px 200px ;
       border:2px solid rgb(222, 225, 230);

   }
   .aaa{
       width:850px;
       height:800px;
       overflow: hidden;
   }
   .item-title{
       padding:13px 15px;
       color:deepskyblue !important;
       border-bottom:2px solid rgb(222, 225, 230);
   }
   .item-ul{
       margin:0;
       padding:0;
       list-style: none;
   }
   .item-li{
       border-bottom:2px solid rgb(222, 225, 230);
       padding:20px 40px;
       margin:5px 15px;
       height:144px;
       overflow:hidden;

   }
    .item-li h3 a{
        border:none;!important;
        padding:0px;
    }
    .item-li p{
        padding:0 20px;
    }
    .fenlei-contation{
        float:right;
        margin:10px 20px;
        border:1px solid red;
    }



</style>
<body>
<div th:replace="~{/common/header::header-body}"></div>

<!--我的代码-->
<div class="item-contation">
    <div class="aaa">

        <h2 class="item-title" style="color: deepskyblue">博客</h2>
        <ul class="item-ul"style="color:deepskyblue">
            <li class="item-li" th:each="article:${articles}">
                <h3 ><a class="page-link title" th:href="@{'/article/'+${article.getId()}}" th:text="${article.getTitle()}">标题</a></h3>
                <p th:text="${article.getContent()}">内容</p>
            </li>
        </ul>
    </div>

    <div>
        <!--分页页面按钮-->
        <div class="container mt-3">
            <ul class="pagination justify-content-center" style="margin:20px 0">
                <!--        上一页需要判断当前页是否已经是第一页-->
                <li class="page-item"style="color: deepskyblue"><a class="page-link" th:href="@{'/page/'+${page==1?1:page-1}}">上一页</a></li>
                <!--        高亮当前页按钮-->
                <li th:each="i:${#numbers.sequence(1, totalPage)}" th:class="${page==i}?'page-item active':'page-item'"style="color: deepskyblue">
                    <a class="page-link" th:href="@{'/page/'+${i}}" th:text="${i}">1</a>
                </li>
                <!--        下一页需要判断当前页是否已经是最后一页-->
                <li class="page-item"style="color: deepskyblue"><a class="page-link" th:href="@{'/page/'+${page==totalPage?totalPage:page+1}}">下一页</a></li>
            </ul>

        </div>
    </div>

<!--    <div class="fenlei-contation">-->
<!--        <div class="fenlei-title">-->
<!--            <h5>分类</h5>-->
<!--            <span>more</span>-->
<!--        </div>-->
<!--        <div class="fenlei-item">-->
<!--            <ul>-->
<!--                <li class="fenlei-neirong" >学习日志 <span classs="fenlei-count">18</span></li>-->
<!--                <li>思考与感悟<span>9</span></li>-->
<!--                <li>清单<span>Java</span></li>-->
<!--            </ul>-->
<!--        </div>-->

<!--    </div>-->

<!--</div>-->




<!--<div class="container mt-3">-->
<!--    <ul class="list-group list-group-flush">-->
<!--        <li class="list-group-item" th:each="article:${articles}">-->
<!--            <h3><a class="page-link title" th:href="@{'/article/'+${article.getId()}}" th:text="${article.getTitle()}">标题</a></h3>-->
<!--            <p th:text="${article.getContent()}">内容</p>-->
<!--        </li>-->
<!--    </ul>-->
<!--</div>-->




</body>
</html>